<template>
  <view>
    <image class="logo" src="@/static/home/subpage/fundFlow-logo.png" mode="widthFix"></image>
    <view class="chart-box" :style="{ 'height': this.length * 60 + 'rpx' }">
      <view class="date">{{ date }} 期货品种资金流向</view>
      <l-echart ref="barChart"></l-echart>
    </view>
  </view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';
export default {
  data() {
    return {
      length: 0,
      date: null,
      barOption: {},
      yAxisData: [],
      seriesData: [],
      colorList: ['#FF3B30', '#33C45B'],
    };
  },
  onLoad(options) {
    this.get_cash_flow()
  },
  methods: {
    get_cash_flow() {
      this.$request({
        url: this.$api.get_cash_flow,
        method: 'get',
        data: {
          start_date: this.day(),
          end_date: this.day(),
        },
        successCb: (res) => {
          let day = res.data[0].date.slice(-4)
          this.date = `${day[0] + day[1]}月${day[2] + day[3]}日`
          this.length = res.data.length
          res.data.map((item) => {
            this.yAxisData.push(item.product_name)
            this.seriesData.push({
				value: item.converted_price.slice(0, -1), label: {
                position: item.price > 0 ? 'left' : 'right',
                textStyle: {
                  color: item.price > 0 ? this.colorList[0] : this.colorList[1]
                },
              },
			  unit:item.converted_price.slice(-1)
            })
          })
          this.barInit()
        },
        failCb(e) { }
      });
    },

    // 获取年月日
    day(num = 0) {
      const today = new Date();
      const yesterday = new Date(today.getTime() - (24 * 60 * 60 * 1000) * num);
      const date = `${yesterday.getFullYear()}${yesterday.getMonth() + 1 < 10 ? '0' + yesterday.getMonth() + 1 : (yesterday.getMonth() + 1).toString()}${yesterday.getDate()}`
      // return date
      return 20240307
    },

    barInit() {
      let colorList = this.colorList
      this.barOption = {
        //     title: {
        //       text: '3月6日 期货品种资金流向', //主标题文本，'\n'指定换行
        // x:'center',
        // textStyle: {
        //   fontWeight: 'bold', // 标签字体加粗
        //   fontSize: 20, // 标签字体大小
        // }
        //     },
        color: 'rgba(0,0,0,0.45)',
        grid: {
          top: 40,
          bottom: 20,
          left: 80,
          right: 40,
        },
        xAxis: {
          type: 'value',
          position: 'top',
          // show: false,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: function (value) {
                // value 是 xAxis 的 data 中的元素
                var color = value >= 0 ? colorList[0] : colorList[1];
                return color;
              }
            }
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          data: this.yAxisData,
        },
		tooltip: {
			trigger: "axis",
			confine: true, //提示框限制在图形内
			shadowBlur: 0,
			backgroundColor: 'rgba(0, 0, 0, 0.5)',
			axisPointer: {
				type: 'line',
				axis: 'auto', // 指示器的坐标轴。 
				snap: true, // 坐标轴指示器是否自动吸附到点上
			},
			  textStyle : {
				color: '#fff',
			},
			formatter: (params)=> {
				return  params[0].name + '\n' + params[0].marker + params[0].value + params[0].data.unit;
			}
		},
        series: [
          {
            name: 'Cost',
            type: 'bar',
            label: {
              show: true,
              formatter: function (params) {
                // params 是一个包含数据信息的对象
                return params.data.value + params.data.unit;
              },

            },
            barWidth: '40%', // 可以设置为百分比或者固定的像素值
            data: this.seriesData,
            itemStyle: {
              // 通过回调函数为不同的数值设置不同的颜色
              color: function (params) {
                // params 是一个包含数据信息的对象
                return params.value > 0 ? colorList[0] : colorList[1];
              },
            },
          }
        ]
      };
      this.$refs.barChart.init(echarts, chart => {
        chart.setOption(this.barOption);
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.logo {
  width: 750rpx;
}

.chart-box {
  width: 100vw;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  margin-top: -50rpx;
  z-index: 99;
  position: relative;
  padding: 32rpx 0;

  .date {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}
</style>